import { useMemoizedFn } from 'ahooks';
import { Form, Slider, Switch, theme } from 'antd';
import { Cartesian3 } from 'cesium';
import { isNil } from 'lodash';
import { useEffect } from 'react';
import { useCesium } from 'resium';
import { useAppSelector } from '../../../../store';
import { CesiumMath } from '../../../../utils/Type';

const initialValues = {
    atmosphereLightIntensity: 50,
    atmosphereMieScaleHeight: 3200,
    atmosphereRayleighScaleHeight: 10000,
    brightnessShift: 0,
    hueShift: 0,
    perFragmentAtmosphere: false,
    show: true,
};
type KeyType = typeof initialValues;
export default function Atmosphere() {
    const pos = useAppSelector((state) => state.scene.initPosition);
    const { viewer } = useCesium();

    const { token } = theme.useToken();

    useEffect(() => {
        if (isNil(viewer)) return;

        const target = Cartesian3.fromDegrees(pos.longitude, pos.latitude, 1000);
        viewer.camera.setView({
            destination: target,
            orientation: {
                heading: viewer.camera.heading,
                pitch: CesiumMath.toDegrees(0),
                roll: viewer.camera.roll,
                up: Cartesian3.clone(Cartesian3.UNIT_Y),
            },
        });
        // show：布尔类型，用于显示或隐藏天空大气层。默认情况下，viewer.scene.skyAtmosphere.show = true 会显示天空大气层。将其设置为 false 可隐藏天空大气层。
        // atmosphereLightIntensity：数字类型，代表用于计算天空大气层颜色的光强度。默认值为 50.0。
        // atmosphereMieAnisotropy：数字类型，介质的各向异性，用于考虑米氏散射。有效范围在 -1.0 到 1.0 之间，默认值为 0.9。
        // atmosphereMieCoefficient：Cartesian3 类型，用于大气散射方程的米氏散射系数。默认值为 Cartesian3(21e-6, 21e-6, 21e-6)。
        // atmosphereMieScaleHeight：数字类型，用于大气散射方程的米氏标度高度，单位为米。默认值为 3200.0。
        // atmosphereRayleighCoefficient：Cartesian3 类型，用于大气散射方程的瑞利散射系数。默认值为 Cartesian3(5.5e-6, 13.0e-6, 28.4e-6)。
        // atmosphereRayleighScaleHeight：数字类型，用于大气散射方程的瑞利标度高度，单位为米。默认值为 10000.0。
        // brightnessShift：数字类型，应用于大气层的亮度偏移。默认为 0.0（无偏移），-1.0 表示完全黑暗，将显示太空背景。
        // hueShift：数字类型，应用于大气层的色调偏移。默认为 0.0（无偏移），1.0 表示色调完全旋转。
        // perFragmentAtmosphere：布尔类型，是否逐片段计算大气层效果，而不是逐顶点计算。默认为 false，启用后会产生更好看的大气层效果，但性能会略有下降。
    }, [pos.latitude, pos.longitude, viewer]);

    const onValuesChange = useMemoizedFn((value: Record<keyof KeyType, number | boolean>) => {
        if (isNil(viewer)) return;

        if (!isNil(value.atmosphereLightIntensity)) {
            viewer.scene.skyAtmosphere.atmosphereLightIntensity =
                value.atmosphereLightIntensity as number;
        }
        if (!isNil(value.atmosphereMieScaleHeight)) {
            viewer.scene.skyAtmosphere.atmosphereMieScaleHeight =
                value.atmosphereMieScaleHeight as number;
        }
        if (!isNil(value.atmosphereRayleighScaleHeight)) {
            viewer.scene.skyAtmosphere.atmosphereRayleighScaleHeight =
                value.atmosphereRayleighScaleHeight as number;
        }
        if (!isNil(value.brightnessShift)) {
            viewer.scene.skyAtmosphere.brightnessShift = value.brightnessShift as number;
        }
        if (!isNil(value.hueShift)) {
            viewer.scene.skyAtmosphere.hueShift = value.hueShift as number;
        }
        if (!isNil(value.perFragmentAtmosphere)) {
            viewer.scene.skyAtmosphere.perFragmentAtmosphere =
                value.perFragmentAtmosphere as boolean;
        }
        if (!isNil(value.show)) {
            viewer.scene.skyAtmosphere.show = value.show as boolean;
        }
    });

    return (
        <>
            <div
                style={{
                    position: 'absolute',
                    top: '10px',
                    left: '10px',
                    backgroundColor: token.colorBgBase,
                }}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 16 }}
                    style={{ width: '300px', padding: '10px' }}
                    initialValues={initialValues}
                    autoComplete="off"
                    onValuesChange={onValuesChange}
                >
                    <Form.Item label="光强度" name="atmosphereLightIntensity">
                        <Slider min={0} max={2000} />
                    </Form.Item>
                    <Form.Item label="米氏散射" name="atmosphereMieScaleHeight">
                        <Slider min={0} max={80000} />
                    </Form.Item>
                    <Form.Item label="瑞利散射" name="atmosphereRayleighScaleHeight">
                        <Slider min={0} max={500000} />
                    </Form.Item>
                    <Form.Item label="亮度偏移" name="brightnessShift">
                        <Slider min={-1} max={1} step={0.01} />
                    </Form.Item>
                    <Form.Item label="色调偏移" name="hueShift">
                        <Slider min={-1} max={1} step={0.01} />
                    </Form.Item>
                    <Form.Item label="大气层效果" name="perFragmentAtmosphere">
                        <Switch />
                    </Form.Item>
                    <Form.Item label="大气层显隐" name="show">
                        <Switch />
                    </Form.Item>
                </Form>
            </div>
        </>
    );
}
